<template>
  <view class="app-container">
    <view class="topfloat"></view>
    <view class="top-content" style>
      <u-tabs-swiper
        style="position: fixed;"
        bg-color="linear-gradient(to left, #1040BE, #026DFF)"
        active-color="#ffffff"
        inactive-color="#ffffff"
        color="#ffffff"
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <!-- <view class="tops"> -->
    <view class="top" >
      <view class="date">
        <image
          src="../../static/images/date2.png"
          @click="handleDate()"
          mode="aspectFit"
          class="image"
        />
        <view>
          <u-calendar v-model="show" @change="timechange" mode="range"></u-calendar>
          <u-tag :text="date" @click="handleDate()" mode="plain" type="primary" shape="square" />
        </view>

      </view>
      <u-input v-model="value" :border="true" placeholder="请输入系统或计划名称" :clearable="true" />
      <u-button
        type="primary"
        size="mini"
        class="btn"
        style="margin-left:5rpx;margin-top:5rpx"
        @click="cancel"
      >重置</u-button>
    </view>

    <view class="box-contet">
      <swiper
        class="cardlist"
        :current="swiperCurrent"
        @change="change"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(item,index) in 4" :key="index">
          <scroll-view scroll-y @scrolltolower="handle" :lower-threshold="250" class="scrollHeight">
            <scroll-view
              scroll-y
              style=" height:calc(100%); width: 100%"
              @scrolltolower="onreachBottom"
            >
              <view class style="height: 10rpx; color: #eee"></view>
              <view class="card" v-if="secondNone">
                <view v-for="(item, index) in dataList1" :key="index">
                  <card status="1" :data="item" />
                </view>
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />

              </view>
            </scroll-view>
          </scroll-view>
        </swiper-item>

      </swiper> 
    </view>
  </view>
  
  <!-- </view> -->
</template>

<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue'
import card from '@/components/preview/card.vue'
import { pointCheckTaskList } from '@/api/index.js'
export default {
  components: {
    WucTab,
    card
  },
  watch: {
    value: {
      // 可以监听对象的单个属性
      handler(newval, oldval) {
        this.getList()
      },
      deep: true
    }
  },
  data() {
    return {
      show: false,
      src:'../../static/images/nodata.png',
      status: 'nomore',
      iconType: 'flower',
      loadText: {
        loadmore: '暂无数据',
        loading: '努力加载中',
        nomore: '没有更多数据',
        data:'暂无数据'
      },
      datashow:false,
      value: '',
      tabs: [
        {
          name: 123
        }
      ],
      list: [
        {
          name: '未开始'
        },
        {
          name: '进行中'
        },
        {
          name: '已超时'
        },
        {
          name: '已完成'
        }
      ],
      firstNone: true,
      secondNone: true,
      thirdNone: true,
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      dataList1: [],
      startdata: 0,
      enddata: 0,
      date: '',
      startTime: '',
      endtime: ''
    }
  },
  onReachBottom() {},
  onPullDownRefresh() {
    setTimeout(function() {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onShow: function() {
    if (!this.date) this.date = '所有数据'
    this.getList()
  },
  onLoad: function(val) {
    setTimeout(function() {
      console.log('start pulldown')
    }, 1000)
    uni.startPullDownRefresh()
  },
  methods: {
    handle() {},
    getList() {
      this.datashow=false
      uni.showLoading({
        title: '加载中'
      })
      // const data = {
      //   startdata: 0,
      //   enddata: this.enddata + 5
      // }
      const data2 = {
        pageNum:0,
         pageSize: this.enddata + 4,
        status: this.swiperCurrent,
        startTimeBegin: this.startTime,
        startTimeEnd: this.endtime,
        keyValue: this.value
      }
      pointCheckTaskList(data2).then(res => {
        
        if (res.total > data2.pageSize) {
          this.status = 'loadmore'
        } else if(res.total ==0){
          this.status = 'loadmore'
          this.datashow=true
        }else {
          this.status = 'nomore'
        }
        // const newdata = res.rows.slice(data2.startdata, data2.enddata - 1)
        this.dataList1 = res.rows
        uni.hideLoading()
      })
    },
    tabsChange(index) {
      this.swiperCurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.current = current
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      this.status = 'loading'
      this.enddata = this.enddata + 5
      this.getList()
    },
    handleDate() {
      this.show = true
      // uni.navigateTo({
      //   url: "/pages/preview/date"
      // });
    },
    onClick() {},
    change(index) {
      this.enddata = 0
      this.swiperCurrent = index.detail.current
      this.getList()
    },
    timechange(e) {
      this.startTime = e.startDate
      this.endtime = e.endDate
      this.date = this.startTime + '至' + this.endtime
      this.getList()
    },
    cancel() {
      ;(this.date = '所有数据'), (this.value = '')
      this.startTime = 0
      this.endtime = 0
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  height: 100%;
  .top-content {
    height: 160upx;
    background: linear-gradient(to left, #1040be, #026dff);
  }
  .box-contet {
    height: calc(100% - 180upx);
    margin-top: 20rpx;
    .cardlist {
      height: 100%;
      .swiper-item {
        height: 100%;
      }
    }
  }
}
.date {
  margin-right: 10rpx;
  display: flex;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}
.top {
  z-index: 10;
  position: absolute;
  padding: 30rpx 30rpx 18rpx 30rpx;
  width: 100%;
  top: 100rpx;
  background-color: white;
  display: flex;
  border-radius: 40rpx 40rpx 0 0;

  .btn {
    position: absolute;
    right: 35rpx;
    border-radius: 16rpx;
  }
  /deep/ .u-btn--primary {
    background: linear-gradient(to left, #1040be, #026dff);
  }
  /deep/ .uni-input-placeholder {
    font-size: 22rpx;
    color: #989898 !important;
    // line-height:100upx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
  /deep/ .u-flex {
    margin-right: 80rpx;
  }
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 45rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-input--border {
    border: 1px solid #eee !important;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    // color: #989898 !important;
    // height: 60upx;
    // line-height: 20upx;
  }
  /deep/ .u-input__input {
    min-height: 55upx !important;
    color: #989898 !important;
  }
}

.cardlist {
  background: #ffffff;
}
.scrollHeight {
  height: 100%;
}
.card {
  width: 100%;
  padding: 30rpx;
}
// .topfloat{
//    /* #ifndef APP-PLUS-NVUE */
// 	display: flex;
// 	position: -webkit-sticky;
// 	/* #endif */
// 	position: sticky;
// 	top: var(100% -100);
// 	z-index: 999999999;
// 	flex-direction: row;
// 	margin: -34rpx 40rpx +34rpx 0rpx;
// }
/deep/ .u-drawer-content {
  height: 90% !important;
}
/deep/ .u-calendar__bottom__choose {
  height: 0rpx !important;
}
</style>
